<template>
  <div class="home">
        <Header head-title="余额查询" go-back="true"></Header>
        <el-tabs v-model="activeName" :stretch="true" class="Card">
            <el-tab-pane label="按卡号查" name="first">

                <el-tabs type="border-card" @tab-click="handleClick" :stretch="true" >
                    <el-tab-pane label="主卡" >
                        <section class="Select CardApply">
                            <p class="fonts">姓名</p>
                            <input type="text" v-model="name" class="Back_input" placeholder="请输入持卡人真实姓名">
                        </section>
                        <section class="Select CardApply">
                            <p class="fonts">卡面号</p>
                            <input type="tel" v-model="numCode" class="Back_input" placeholder="请输入卡面号">
                        </section>
                        <section class="Select CardApply">
                            <p class="fonts">手机号</p>
                            <input type="tel" maxlength="11" v-model="phone" class="Back_input" placeholder="请输入持卡人手机号">
                        </section>
                        <el-button type="primary" class="Login" @click="SearchResult()">确认提交</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="副卡">
                        <section class="Select CardApply">
                            <p class="fonts">姓名</p>
                            <input type="text" v-model="name" class="Back_input" placeholder="请输入持卡人真实姓名">
                        </section>
                        <section class="Select CardApply">
                            <p class="fonts">身份证号</p>
                            <input type="tel" v-model="numCode" class="Back_input" placeholder="请输入持卡人身份证号">
                        </section>
                        <section class="Select CardApply">
                            <p class="fonts">手机号</p>
                            <input type="tel" v-model="phone" maxlength="11" class="Back_input" placeholder="请输入持卡人手机号">
                        </section>
                        <el-button type="primary" class="Login" @click="SearchResult()">确认提交</el-button>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
            <el-tab-pane label="按证件号查" name="second">
                <section class="Select CardApply">
                    <p class="fonts">身份证号</p>
                    <input type="number" class="Back_input" placeholder="请输入持卡人身份证号">
                </section>
                <el-button type="primary" @click="SearchResultA()" class="Login">确认提交</el-button>

                <section>
                  <img class="ImgNone" src="../../assets/img/voucher.png" alt="">
                  <p class="fonts">该证件号名下没有健康卡，请重新输入证件号查询</p>
                </section>

                <section class="swiperIn" @click="SearchResult()">
                    <div class="card_center">
                        <div class="center_left">
                            <span class="left_top">
                                张三丰
                            </span>
                            <span class="left_bottom">
                                4127*********1234
                            </span>
                        </div>
                        <div class="center_right">
                            <img class="right_top" src="../../assets/img/logo_.png" alt="">
                            <img class="right_bottom" src="../../assets/img/qrcode.png" alt="">
                        </div>
                    </div>
                </section>

            </el-tab-pane>
            <el-tab-pane label="按手机号查" name="third">
                <section class="Select CardApply">
                    <p class="fonts">姓名</p>
                    <input type="text" class="Back_input" placeholder="请输入持卡人真实姓名">
                </section>
                <section class="Select CardApply">
                    <p class="fonts">手机号</p>
                    <input type="number" class="Back_input" placeholder="请输入持卡人手机号">
                </section>
                <el-button type="primary" class="Login">确认提交</el-button>

                <section>
                  <img class="ImgNone" src="../../assets/img/voucher.png" alt="">
                  <p class="fonts">该手机号没有注册过健康卡，请重新输入</p>
                </section>

                <section class="swiperIn" @click="SearchResult()">
                    <div class="card_center">
                        <div class="center_left">
                            <span class="left_top">
                                张三丰
                            </span>
                            <span class="left_bottom">
                                4127*********1234
                            </span>
                        </div>
                        <div class="center_right">
                            <img class="right_top" src="../../assets/img/logo_.png" alt="">
                            <img class="right_bottom" src="../../assets/img/qrcode.png" alt="">
                        </div>
                    </div>
                </section>

            </el-tab-pane>
        </el-tabs>

  </div>
</template>

<script>
import Header from '../../components/Header'
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      activeName: 'first',
      activeIndex: '1',
      radio: '1',
      radio1: '1',
      numCode: '', // 卡面号
      name: '',
      phone: '',
      card_type: '0' // 卡类型(0 主卡 1 副卡) ,
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
    //   console.log(tab, event)
      this.card_type = tab.index
    },
    // Label (index, value) {
    //   this.label = index
    // },
    // LabelZ (index, value) {
    //   this.labelZ = index
    // },
    //  余额查询结果页面
    SearchResult () {
      if (this.name === '') {
        Toast('请输入姓名')
        return
      }
      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.numCode)) {
        Toast('请输入有效的身份证号')
        return
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        Toast('请输入正确的手机号')
        return
      }
      const url = 'home/card/balance'
      this.$axios({
        method: 'post',
        url: url,
        data: { card_no: this.numCode, card_type: this.card_type, name: this.name, phone: this.phone }
      }).then(res => {
        console.log(res)
        if (res.data.code !== 200) {
          Toast(res.data.message)
          return
        }
        this.$router.push({
          path: '/SearchResult',
          name: 'SearchResult',
          params: {
            status: res.data.data
          }
        })
      })
    }
    // SearchResultA(){

    // }
  }
}
</script>

<style scoped>
.home {
    padding: 0 0.2rem;
    padding-top: 1rem;
}
.swiperIn {
    margin: 0.2rem auto;
    position: relative;
    margin-top: 0.5rem;
}
</style>
